<template>
  <div class="wrapper">
    <div class="userLoginHead">
      <span style="margin-left: 15%; font-size: 24px; font-weight: 600">闲置物品交易基地</span>
    </div>
    
    <div class="container">
      <!-- 登录信息界面 -->
      <div class="login">
        <div class="block">
          <div class="inputTitle"><span>用户名</span></div>
          <!-- 账号和密码输入框 -->
          <el-form class="inputs">
            <el-form-item>
              <el-input
                v-model="username"
                placeholder="请输入用户账号"
                clearable
              />
            </el-form-item>

            <div class="inputTitle"><span>密码</span></div>
            <el-form-item>
              <el-input
                v-model="password"
                type="password"
                placeholder="请输入用户密码"
                show-password
              />
            </el-form-item>
          </el-form>

          <el-button
            type="primary"
            size="large"
            style="background-color: #59d15f; border: 3px solid #59d15f"
            @click="login"
            >登录</el-button
          >

          <br />

          <!-- 注册跳转链接 -->
          <div class="register">
            <span>没有账号？<a href="#">点击注册</a></span>
            <span><a href="#">忘记密码</a></span>
          </div>

          <div class="line">
            <span class="text">温馨提示</span>
          </div>

          <div class="icon">
            <span>推荐使用谷歌Chrome浏览器以及360极速模式</span
            ><span>推荐在分辨率1920*1080下使用最佳</span>
          </div>
        </div>
      </div>
    </div>

    <div class="userLoginBottom">
      <div class="loginBottomDiv">
        <img style="width: 35px; height: auto" src="..\assets\扳手.png" />
        <a>号码保障</a>
        <span style="font-size: 14px">所有会员，手机验证</span>
      </div>

      <div class="loginBottomDiv">
        <img style="width: 35px; height: auto" src="..\assets\时钟.png" />
        <a>6*12小时客服</a>
        <span style="font-size: 14px">任何问题免费实时咨询</span>
      </div>

      <div class="loginBottomDiv">
        <img style="width: 35px; height: auto" src="..\assets\循环.png" />
        <a>专业专攻</a>
        <span style="font-size: 14px">我们只专注于回收行业的新信息</span>
      </div>

      <div class="loginBottomDiv">
        <img style="width: 35px; height: auto" src="..\assets\礼物.png" />
        <a>注册有礼</a>
        <span style="font-size: 14px">用户注册有惊喜大礼包</span>
      </div>

      <div class="loginBottomDiv">
        <img style="width: 35px; height: auto" src="..\assets\折叠.png" />
        <a>值得信赖</a>
        <span style="font-size: 14px">专业的品质，专业的团队</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import request from "../request/axios.js";
import { ElMessage } from "element-plus";
import router from "@/router/index.js";

export default {
  name: "login",
  setup() {
    let username = ref("");
    let password = ref("");

    // 登录按钮：审核用户账户和密码
    const login = () => {
      request
        .post("/login/customer", {
          username: username.value,
          password: password.value,
        })
        .then((res) => {
          if (!username.value || !password.value) {
            ElMessage.warning("账号或密码不能为空");
          } else if (res.code === "200") {
            localStorage.setItem("user", JSON.stringify(res));
            ElMessage.success("登录成功，欢迎回家");
            router.push("/");
          } else if (res.code === "600") {
            username.value = "";
            password.value = "";
            ElMessage.error("账户或密码错误");
          }
        });
    };

    return {
      username,
      password,
      login,
    };
  },
};
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  width: 100%;
}

#map {
  margin-left: auto;
  min-height: 0%;
  min-width: 0%;
}

#web {
  min-width: 0%;
  min-height: 0%;
}

.container {
  display: flex;
  width: 50%;
  height: 45%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: auto;
}

.userLoginHead {
  display: flex;
  align-items: center;
  width: 100%;
  height: 8%;
  background-color: #ffffff;
}

.userLoginBottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  bottom: 0%;
  height: 20%;
  width: 100%;
  background-color: #e9e9e9;
}

.loginBottomDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-inline: 5%;
  font-size: 20px;
  height: 90%;
}

.loginBottomDiv img {
  margin-bottom: 5px;
}

.login {
  position: absolute;
  display: inline;
  width: 20%;
  height: 45%;
  margin-left: 40%;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgb(97, 97, 97);
}

.block {
  margin-top: 16%;
  text-align: center;
}

.title {
  display: flex;
  font-family: "Courier New", Courier, monospace;
  font-size: 28px;
  align-items: center;
  justify-content: center; /* 居中标题 */
  margin-bottom: 8%;
  font-weight: 900;
}

.inputs .el-input {
  margin-left: 15%;
  width: 70%;
}

.el-form-item {
  display: flex;
  justify-content: center;
}

.el-button {
  width: 70%; /* 按钮填充整个容器 */
  text-align: center;
}

.inputTitle {
  display: flex;
  flex-direction: row;
}

.inputTitle span {
  color: #3b3b3b;
  font-size: 16px;
  margin-left: 15%;
  margin-bottom: 5px;
}

.register {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 5%;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

.register span {
  margin-inline: 10%;
}

.register a {
  text-decoration: none;
  font-weight: 550;
  color: #59d15f;
}

.line {
  text-align: center;
  margin-top: 8%;
  height: 0;
  border-top: 1px solid #b3b3b3;
}

.line .text {
  position: relative;
  top: -12px;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: #b3b3b3;
  padding-inline: 5%;
  background-color: #fff;
}

.icon {
  display: flex;
  flex-direction: column;
  margin-top: 8%;
  width: 100%;
}

.icon span {
  color: #ff6464;
  font-size: 14px;
  margin-block: 0.5%;
}

@media (max-width: 1000px) {
  .introduce {
    width: 0%;
    display: none;
  }

  .login {
    width: 120%;
  }

  .container {
    width: 80%;
    height: 50%;
  }
}
</style>